<template>
  <div>
    <div class="root">
      <div class="two">
        <div class="nav">
          <span class="basic">产品信息</span>
        </div>
        <div class="content">
          <div class="sp">
            <span>总件数：{{ totalCounts }}</span>
            <span>总毛重（kg）：{{ totalGross }}</span>
            <span>总体积（CBM）：{{ totalVolume }}</span>
            <span>总托数：{{ totalPallets }}</span>
          </div>
        </div>
      </div>
      <div class="three">
        <div class="nav">
          <span class="basic">报价</span>
        </div>
        <div class="content">
          <el-form
            :model="detailed"
            style="max-width: 1200px; margin-top: 20px"
            label-width="150px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="业务编号:">
                  <el-input
                    v-model="detailed.goodsType"
                    autocomplete="off"
                    style="width: 300px"
                    disabled
                    size="large"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接单日期:">
                  <el-input
                    v-model="detailed.goodsType"
                    autocomplete="off"
                    style="width: 300px"
                    disabled
                    size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="业务员:">
                  <el-input
                    v-model="detailed.goodsType"
                    autocomplete="off"
                    style="width: 300px"
                    disabled
                    size="large"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="目的港:">
                  <el-input
                    v-model="detailed.goodsType"
                    autocomplete="off"
                    style="width: 300px"
                    disabled
                    size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="提单号:">
                  <el-input
                    v-model="detailed.goodsType"
                    autocomplete="off"
                    style="width: 300px"
                    disabled
                    size="large"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="件毛体:">
                  <el-input
                    v-model="detailed.goodsType"
                    autocomplete="off"
                    style="width: 300px"
                    placeholder="请输入"
                    size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="预计重量:">
                  <el-input
                    v-model="detailed.goodsType"
                    autocomplete="off"
                    style="width: 300px"
                    disabled
                    size="large"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="预计方数:">
                  <el-input
                    v-model="detailed.goodsType"
                    autocomplete="off"
                    style="width: 300px"
                    disabled
                    size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="实际进仓重量:">
                  <el-input
                    v-model="detailed.hscode"
                    autocomplete="off"
                    placeholder="请输入"
                    style="width: 300px"
                    size="large"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实际进仓方数:">
                  <el-input
                    v-model="detailed.hscode"
                    autocomplete="off"
                    placeholder="单行输入"
                    style="width: 300px"
                    size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="单价（USD/吨）:">
                  <el-input
                    v-model="detailed.hscode"
                    autocomplete="off"
                    placeholder="请输入"
                    style="width: 300px"
                    size="large"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="进仓费（RMB）:">
                  <el-input
                    v-model="detailed.hscode"
                    autocomplete="off"
                    placeholder="请输入"
                    style="width: 300px"
                    size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="USD:">
                  <el-input
                    v-model="detailed.hscode"
                    autocomplete="off"
                    placeholder="请输入"
                    style="width: 300px"
                    size="large"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="RMB:">
                  <el-input
                    v-model="detailed.hscode"
                    autocomplete="off"
                    placeholder="请输入"
                    style="width: 300px"
                    size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="备注:">
                  <el-input
                    v-model="detailed.hscode"
                    autocomplete="off"
                    placeholder="请输入"
                    style="width: 300px"
                    size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <div class="dialog-footer">
        <el-button>关闭</el-button>
        <el-button type="primary" @click="aaa"> 提交 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import {
  updateQuote,
  addQuote,
  getQuote,
  updateStatus,
  getProduct
} from "@/api/forworder/forworder.js";
const tableData = ref([]);
const totalCounts = ref(0);
const totalGross = ref(0);
const totalVolume = ref(0);
const totalPallets = ref(0);
const route = useRoute();
const router = useRouter(); // 使用useRouter来获取router实例
const enquiryId = route.query.enquiryId; // 获取传递的询价编号
const pan = route.query.mode; //判断是修改还是添加
const form = ref({
  fee: "",
  seefeeusd: "",
  objectfee: "",
  vidtime: "",
  seefeetotal: "",
  company: "",
  voyage: "",
  voyagen: "",
  screenshot: "",
  clauseid: "",
  enquiyid: enquiryId
});
const detailed = ref({
  inquiryTime: "",
  goodsType: "",
  shippingid: "",
  routeid: "",
  startPort: "",
  oPort: "",
  clauseid: "",
  describe: "",
  hscode: "",
  cabinetid: ""
});
if (pan == "add") {
  form.value = {
    fee: "",
    seefeeusd: "",
    objectfee: "",
    vidtime: "",
    seefeetotal: "",
    company: "",
    voyage: "",
    voyagen: "",
    screenshot: "",
    clauseid: "",
    enquiyid: enquiryId
  };
} else if (pan == "update") {
  getList();
}
async function aaa() {
  if (pan == "add") {
    let res = await save();
    await upda();
    if (res == 200) {
      goToIndex();
    }
  } else {
    let re = await update();
    if (re == 200) {
      goToIndex();
    }
  }
}
async function save() {
  form.value.enquiyid = enquiryId;
  let res = await addQuote(form.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
  } else {
    ElMessage({
      message: "保存失败",
      type: "error"
    });
  }
  return res.code;
}
async function update() {
  form.value.enquiyid = enquiryId;
  let res = await updateQuote(form.value);
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
  } else {
    ElMessage({
      message: "修改失败",
      type: "error"
    });
  }
  return res.code;
}
async function getList() {
  let res = await getQuote(enquiryId);
  form.value = res.data;
}
async function upda() {
  let res = await updateStatus(enquiryId);
}
// 点击查看报价按钮时跳转
function goToIndex() {
  router.push({
    name: "index" // 跳转的目标页面名称
  });
}
async function getProductList() {
  let res = await getProduct(enquiryId);
  tableData.value = res.data;

  // 计算总和
  totalCounts.value = tableData.value.counts(
    (sum, item) => sum + item.counts,
    0
  );
  totalGross.value = tableData.value.gross((sum, item) => sum + item.gross, 0);
  totalVolume.value = tableData.value.volume(
    (sum, item) => sum + item.volume,
    0
  );
  totalPallets.value = tableData.value.pallet(
    (sum, item) => sum + item.pallet,
    0
  );
}
// 初始化加载列表
onBeforeMount(() => {
  getProductList();
  getClauseList();
  getShippingList();
  getRouteList();
  getCabinetList();
});
</script>

<style scoped>
.root {
  width: 95vw;
  border-radius: 5px;
}
.nav {
  background-color: #efefef;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #c1c1c1;
}
.basic {
  margin-left: 30px;
}

:deep(.avatar-uploader .avatar) {
  width: 128px;
  height: 128px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}
.dialog-footer {
  width: 150px;
  display: flex;
  justify-content: space-between;
  position: relative;
  left: 40%;
  transform: translateX(-40%);
}
.two,
.three {
  background-color: #ffffff;
  border: 1px solid #c1c1c1;
}
.two,
.three {
  margin-top: 30px;
}
.sp {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
.sp span {
  padding: 50px 70px;
  display: inline-block;
}
</style>
